<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  // @Component 修饰符注明了此类为一个 Vue 组件
  @Component({
    // 所有的组件选项都可以放在这里
    template: '<button @click="onClick">Click!</button>',
    props: {
      propMessage: String
    }
  })
  export default class MyComponent extends Vue {
    // 初始数据可以直接声明为实例的属性
    // initial data
    message: string = 'Hello'
    msg = 123

    // use prop values for initial data
    helloMsg = 'Hello, ' + this.propMessage

    // computed
    get computedMsg () {
      return 'computed ' + this.msg
    }

    // lifecycle hook
    mounted() {
      this.greet()
    }

    // methods
    // 组件方法也可以直接声明为实例的方法
    onClick(): void {
      window.alert(this.message)
    }
    greet () {
      alert ('greeting: ' + this.msg)
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
